<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 200px;
            height: 150px;
            margin: 100px auto;
        }
        
        #box img {
            width: 200px;
            height: 150px;
        }
        
        #div {
            width: 500px;
            height: 500px;
            margin: auto;
        }
        
        #div div {
            width: 50px;
            height: 50px;
            position: relative;
            float: left;
            margin: 15px;
        }
        
        #div div img {
            width: 50px;
            height: 50px;
            position: absolute;
            left: 0px;
            top: 0px;
        }
    </style>
</head>

<body>
    <div id="box"><img src="./images/src=http___pic.51yuansu.com_pic3_cover_01_34_58_59249fa07ef2e_610.jpg&refer=http___pic.51yuansu.webp" alt=""></div>
    <div id="div">
        <div><img src="./images/basketball.png" alt=""></div>
        <div><img src="./images/box.png" alt=""></div>
        <div><img src="./images/calculator.png" alt=""></div>
        <div><img src="./images/clipboard.png" alt=""></div>
        <div><img src="./images/console.png" alt=""></div>
        <div><img src="./images/facebook.png" alt=""></div>
        <div><img src="./images/gift.png" alt=""></div>
        <div><img src="./images/id_card.png" alt=""></div>
        <div><img src="./images/imac.png" alt=""></div>
        <div><img src="./images/system_monitoring.png" alt=""></div>
    </div>
    <script>
        div.onmousedown = function(e) {
            e = e || window.event;
            let t = e.target || window.srcElement;
            e.preventDefault();
            // e.stopPropagation();
            if (t.nodeName == 'IMG') {
                let x = e.clientX - t.offsetLeft;
                let y = e.clientY - t.offsetTop;
                // console.log(e.clientX,e.clientY);
                document.onmousemove = function(e) {
                    e = e || window.event;
                    let x1 = e.clientX - x;
                    let y1 = e.clientY - y;
                    t.style.left = x1 + 'px';
                    t.style.top = y1 + 'px';

                }
                document.onmouseup = function(e) {
                    e = e || window.event;
                    var shan = box.getBoundingClientRect();
                    if (e.clientX > shan.left && e.clientX < shan.right && e.clientY > shan.top && e.clientY < shan.bottom) {
                        t.remove();
                    }
                    // document.onmousemove = null;
                    document.onmouseup = null;
                }
            }


        }
    </script>
</body>

</html>